<template>
  <!-- 面包屑区 -->
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/welcome' }">首页</el-breadcrumb-item>
    <el-breadcrumb-item :to="{ path: '/counselorInfo' }">咨询师信息管理</el-breadcrumb-item>
    <el-breadcrumb-item>订单管理</el-breadcrumb-item>
  </el-breadcrumb>
  <!-- 查询 -->
  <el-form :inline="true" :model="queryInfo" class="demo-form-inline">
    <el-form-item label="咨询师名称">
      <el-input v-model="queryInfo.counselorName" placeholder="请输入咨询师姓名" clearable @clear="queryDataList" />
    </el-form-item>
    <el-form-item label="用户名">
      <el-input v-model="queryInfo.username" placeholder="请输入用户名" clearable @clear="queryDataList" />
    </el-form-item>
    <el-form-item label="收费类别">
      <el-input v-model="queryInfo.classify" placeholder="请输入收费类别" clearable @clear="queryDataList" />
    </el-form-item>
    <el-form-item label="金额">
      <el-input v-model="queryInfo.price" placeholder="请输入金额" clearable @clear="queryDataList" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="queryDataList">搜索</el-button>
      <el-button type="danger" @click="batchRemove"> 批量删除</el-button>
    </el-form-item>
  </el-form>
  <!-- 展示表格-->
  <el-table :data="dataList" row-key="id" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column property="id" label="ID" width="60" />
    <el-table-column property="sortName" label="收费类别" />
    <el-table-column property="actualAmount" label="金额" />
    <el-table-column property="username" label="用户名" />
    <el-table-column property="consultantName" label="咨询师姓名" />
    <el-table-column fixed="right" label="操作" min-width="120">
      <template #default="scope">
        <el-button type="danger" size="small" @click="remove(scope.row.id)">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页组件 -->
  <el-pagination
    v-model:current-page="currentPage"
    v-model:page-size="pageSize"
    :page-sizes="[5,10,15,20]"
    :size="size"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
  <router-view></router-view>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, reactive, ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const pageSize = ref(5);
const currentPage = ref(1);
const size = ref('default');

const queryInfo = reactive({
  counselorName: '',
  username: '',
  classify: '',
  price: '',
  pageNum: 1,
  pageSize: 5
})

const total = ref(0);
const dataList = ref([]);

const axios = getCurrentInstance().appContext.config.globalProperties.axios;

// 查询数据
const queryDataList = () => {
  // 参数名适配后端
  const params = {
    pageNum: queryInfo.pageNum,
    pageSize: queryInfo.pageSize,
    consultantName: queryInfo.counselorName,
    username: queryInfo.username,
    sortName: queryInfo.classify,
    actualAmount: queryInfo.price
  }
  axios.get('consultantOrder/page', { params }).then((res) => {
    if (res.code == 200) {
      dataList.value = res.data.list;
      total.value = res.data.total;
    } else {
      ElMessage.error('数据查询失败')
    }
  })
}

// 组件加载完毕，查询数据
onMounted(() => {
  queryDataList()
})

// 存储复选的数据
const multipleSelection = ref<number[]>([])

const handleSelectionChange = (val) => {
  multipleSelection.value = val.map(item => item.id)
}

// 每页显示条目数改变
const handleSizeChange = (val) => {
  queryInfo.pageSize = val;
  queryInfo.pageNum = 1;
  queryDataList();
}

// 页码改变
const handleCurrentChange = (val) => {
  queryInfo.pageNum = val;
  queryDataList();
}

// 删除单条
const remove = (id) => {
  ElMessageBox.confirm('此操作永久删除该订单，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    axios.delete(`consultantOrder/${id}`)
      .then(resp => {
        if (resp.code == 200) {
          ElMessage.success('删除成功')
        } else {
          ElMessage.error('删除失败')
        }
        queryDataList();
      })
  }).catch(() => {
    ElMessage({ type: 'info', message: '取消删除' })
  })
}

// 批量删除
const batchRemove = () => {
  if (multipleSelection.value.length === 0) {
    ElMessage.warning('请先选择要删除的订单')
    return
  }
  ElMessageBox.confirm('此操作永久删除选中订单，是否继续？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    axios.delete('consultantOrder/batch', {
      params: { ids: multipleSelection.value.join(',') }
    }).then(resp => {
      if (resp.code == 200) {
        ElMessage.success('删除成功')
      } else {
        ElMessage.error('删除失败')
      }
      queryDataList();
    })
  }).catch(() => {
    ElMessage({ type: 'info', message: '取消删除' })
  })
}
</script>

<style>
.el-breadcrumb {
  margin-bottom: 15px;
  padding: 0 0 15px;
  border-bottom: 1px solid #ddd;
}
.el-pagination {
  margin-top: 15px;
}
.demo-form-inline .el-input {
  --el-input-width: 220px;
}
.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>